<?php
    include '../h5.php';
    include_once '../aliyun/uploadVideo.php';
    include_once '../aliyun/getSts.php';
    $h5 = new h5('xq');
    $vid = $_GET['vid'];
    if(intval($vid)){
        $query = 'select content,vcid,vid,title,isvip,videoid,try_videoid from mtvideos where vid = '.intval($vid);
        $row = $h5->mysql->get_one($query);
        $vcid = $row['vcid'];
        $isvip = $row['isvip'];
        $cover = $h5->mysql->get_one("select cover from videoscollection where vcid = ".$row['vcid'])['cover'];
        $cover = 'https://app.kekeshi.com/'.$cover;
    }
    
    $upload = new uploadVideo();
    $playinfourl = $upload->get_play_info($row['try_videoid']);
     // print_r($playinfourl);exit;            
    if($playinfourl->VideoBase->Status=='Normal'){
        // print_r($playinfourl->PlayInfoList);exit;
        $playurl = $playinfourl->PlayInfoList->PlayInfo[1]->PlayURL;         
    }
    $cover = $playinfourl->VideoBase->CoverURL;  

    $desc='可可狮，分月龄家庭早教。';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name=”x5-orientation” content=”portrait”>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <title><?php echo $row['title']?></title>
    
    <link rel="stylesheet" href="//g.alicdn.com/de/prismplayer/2.7.2/skins/default/aliplayer-min.css" />
    <script type="text/javascript" charset="utf-8" src="//g.alicdn.com/de/prismplayer/2.7.2/aliplayer-min.js"></script>
     <script src="./jquery.js"></script>
    <script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>    
    <script src="./WWeixinApi.js?v=199"></script>
    <style>
        *{margin: 0; padding: 0;}
        html,body{width:100%;height: 100%;overflow:hidden;font-family: "微软雅黑";font-size:50px;margin:0;padding:0}
        p,ul,li{font-size: 16px;}
        li{list-style: none;}

        .videoPage{width: 100%; height: 100%; position: relative; top: 0; left: 0; overflow: hidden}
        .bigBox{width: 100%; height: 100%;  overflow: hidden;}
        .wrap{width: 100%; height: 89%; margin-top: 1.3rem; position: absolute;overflow:auto;overflow-y:scroll;-webkit-overflow-scrolling: touch; z-index: 11;}
        .void{width: 7.5rem; height: 14rem; position: absolute;}
        .video{width: 7.5rem; height: 5.2rem; position: relative; background: #000;}
        .vjs-tech{width: 7.5rem; height: 4.6rem;}
        .name{width: 7rem; font-size: 0.34rem; color: #000; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; margin-top: 0.2rem; margin-left: 0.25rem;}
        .contentName{width: 1.6rem; height: 0.32rem; line-height: 0.32rem; font-size: 0.32rem; color: #000; font-weight: 600; text-indent: 0.2rem; position: relative; margin-top: 0.4rem; margin-left: 0.25rem;}
        .contentName::before{content: '';width: 0.08rem; height: 0.3rem; position: absolute; top: 0; left: 0; background: #F98660;}
        .content{width: 7rem; margin-left: 0.25rem; position: absolute;}
        .content img{width: 100%;}
        .bg{width: 100%; height: 100%; background: #fff; position: absolute;}
        .title{width: 7.5rem; height: 1.22rem; position: fixed; top: 0; left: 0; z-index: 10;}
        .open1{width: 1.32rem; height: 0.56rem; position: fixed; top: 0.26rem; left: 5.88rem; z-index: 11;}
        .open2{width: 1.92rem;height: 0.64rem;position: fixed; bottom: 0.7rem;left: 50%;transform: translateX(-50%);}
        /*.open3{width: 7.5rem; height: 1.07rem; position: fixed; bottom: 0; left: 0; z-index: 11;}
        .btnOpen3{width: 2rem; height: 1rem; position: fixed; bottom: 0; right: 0; z-index: 11;}*/
        .title img, .open1 img, .open2 img, .open3 img{width:100%;display: block;}
        .video-img{width: 100%; display: block; position: absolute; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); top: 50%; left: 50%;}
        .video-img-play{position: absolute;z-index: 2;  width: 1.2rem; height: 1.2rem; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%);}
        .video-img img,.video-img-play img{ width: 100%;}
        .tips-warp{position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,.6); top: 0; left: 0; z-index: 10000; display: none; }
        .tips{ position: absolute; width: 100%; top: 0; left: 0; }
        .tips img{ width: 100%; }
    </style>
</head>
<body>
<div class="videoPage">
    <div class="bg"></div>
    <div class="bigBox">
      <div class="wrap">
        <div class="void"></div>
          <div class="video" >
              <div class="video-img"><img src="<?php echo $cover ?>" /></div>
              <div class="video-img-play"><img src="images/play.png"></div>
          </div>
          <div class="name"><?php echo $row['title']?></div>
          <div class="contentName">视频简介</div>
          <div class="content"><?php echo $row['content']?></div>
      </div>
    </div>
    <div class="title"><img src="images/title.png"></div>
    <div class="open1"><img src="images/open1.png" alt=""></div>
    <div class="open2"><img src="images/open2.png" alt=""></div>
 <!--    <div class="open3"><img src="images/open3.png" alt=""></div>
    <div class="btnOpen3"></div> -->

    <div class="tips-warp">
        <div class="tips"><img src="images/tips.png"></div>
    </div>
</div>
<script>
    wxData.title='<?php echo $row['title']?>';
    wxData.qtitle='<?php echo $row['title']?>';
    wxData.link=baseurl+'mtvideo.php?vid='+'<?php echo $vid?>';
    wxData.desc='<?php echo $desc?>';
    wxData.share();
    document.getElementsByTagName("html")[0].style.fontSize=window.innerWidth/750*100+"px";
    init();
    openApp();
    function init(){

        var content = document.getElementsByClassName("content")[0];
    }

    function openApp(){
        var open1 = document.getElementsByClassName("open1")[0];
        var open2 = document.getElementsByClassName("open2")[0];
        // var btnOpen3 = document.getElementsByClassName("btnOpen3")[0];
        var videoImgPlay = document.getElementsByClassName("video-img-play");
        var tipsWarp = document.getElementsByClassName('tips-warp')[0];

        open1.addEventListener("click",function(){
            console.log('open1');
            
            if(!showTips()){
                //window.location.href = "cocolion://shipin?vid=<?php echo $vid ?>&vcid=<?php echo $vcid ?>";
                if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i))
                {
                    window.location.href = "cocolion://shipin?vid=<?php echo $vid ?>&vcid=<?php echo $vcid ?>";//ios app协议
                    window.setTimeout(function() {
                        window.location.href = "https://itunes.apple.com/cn/app/可可狮/id1445816354?mt=8";
                    }, 2000)
                }
                if(navigator.userAgent.match(/android/i))
                {
                    window.location.href = "cocolion://shipin?vid=<?php echo $vid ?>&vcid=<?php echo $vcid ?>";//android app协议
                    window.setTimeout(function() {
                        window.location.href = "http://a.app.qq.com/o/simple.jsp?pkgname=com.android.kekeshi";//android 下载地址
                    }, 2000)    
                } 
            }

        })
        open2.addEventListener("click",function(){
            console.log('open2');
            if(!showTips()){
                //window.location.href = "cocolion://shipin?vid=<?php echo $vid ?>&vcid=<?php echo $vcid ?>";
                if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i))
                {
                    window.location.href = "cocolion://shipin?vid=<?php echo $vid ?>&vcid=<?php echo $vcid ?>";//ios app协议
                    window.setTimeout(function() {
                        window.location.href = "https://itunes.apple.com/cn/app/可可狮/id1445816354?mt=8";
                    }, 2000)
                }
                if(navigator.userAgent.match(/android/i))
                {
                    window.location.href = "cocolion://shipin?vid=<?php echo $vid ?>&vcid=<?php echo $vcid ?>";//android app协议
                    window.setTimeout(function() {
                        window.location.href = "http://a.app.qq.com/o/simple.jsp?pkgname=com.android.kekeshi";//android 下载地址
                    }, 2000)    
                } 
            }
        })
        // btnOpen3.addEventListener("click",function(){
        //     console.log('btnOpen3');
        //      window.location.href = "https://shop202012.youzan.com/";
           
        // })
        tipsWarp.addEventListener("click",function(){
            tipsWarp.style.display = 'none';
        });

        if(videoImgPlay.length>0) {
            videoImgPlay[0].addEventListener("click",function(){
                console.log('open1');
                if(!showTips()){
                    window.location.href = "cocolion://shipin?vid=<?php echo $vid ?>&vcid=<?php echo $vcid ?>";
                }

            })
        }
    }

    function showTips(){
        if(!isWeiXin()){
            return false;
        }
        var tipsWarp = document.getElementsByClassName('tips-warp')[0];
        tipsWarp.style.display = 'block';
        return true;

    }

    function isWeiXin(){
      //window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
      var ua = window.navigator.userAgent.toLowerCase();
      //通过正则表达式匹配ua中是否含有MicroMessenger字符串
      if(ua.match(/MicroMessenger/i) == 'micromessenger'){
      return true;
      }else{
      return false;
      }
    }
    </script>
<script>
<?php if($isvip): ?>
var player = new Aliplayer({
  "id": "player-con",
  "source": "<?php echo $playurl ?>",
  "width": "100%",
  "height": "100%",
  "autoplay": true,
  "isLive": false,
  "rePlay": false,
  "playsinline": true,
  "preload": true,
  "controlBarVisibility": "click",
  "useH5Prism": true,
  "cover":"",
  "skinLayout": [
      {
          "name": "bigPlayButton",
          "align": "blabs",
          "x": 30,
          "y": 80
      },
      {
          "name": "H5Loading",
          "align": "cc"
      },
      {
          "name": "controlBar",
          "align": "blabs",
          "x": 0,
          "y": 0,
          "children": [
              {
                  "name": "progress",
                  "align": "blabs",
                  "x": 0,
                  "y": 44
              },
              {
                  "name": "playButton",
                  "align": "tl",
                  "x": 15,
                  "y": 12
              },
              {
                  "name": "timeDisplay",
                  "align": "tl",
                  "x": 10,
                  "y": 7
              },
              {
                  "name": "volume",
                  "align": "tr",
                  "x": 5,
                  "y": 10
              }
          ]
      }
  ]
}, function (player) {
    console.log("播放器创建了。");
  }
);
<?php endif; ?>
</script>
</body>
</html>